<!--
 * @Description: 
 * @Date: 2021-11-02 17:04:29
 * @LastEditTime: 2021-11-11 15:13:17
-->
<template>
  <div class="box">
    <van-nav-bar
      title="历史上的今天"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- list -->
    <ul class="ul">
      <li class="title">{{data.date}}</li>
      <li
        v-for="(item,index) in list"
        :key="index"
        class="item"
      >
        <div class="left">{{index+1}}</div>
        <div class="right">
          <p>{{item.date}}</p>
          <p>{{item.title}}</p>
        </div>
      </li>
    </ul>
    <fill />
  </div>
</template>
<script>
import { onMounted, getCurrentInstance, ref } from "vue";
import { useRouter } from "vue-router";
import { fetchData } from "../../api/index.js";
export default {
  setup() {
    const router = useRouter();
    const onClickLeft = () => {
      router.go(-1);
    };
    const list = ref([]);
    const key = "3e3e8cac26a527abcb69e96b37f99f31";
    const data = {
      key: key,
      date: new Date().getMonth() + 1 + "/" + new Date().getDate(),
    };
    onMounted(() => {
      const { proxy } = getCurrentInstance();
      // proxy.$axios
      //   .get("http://v.juhe.cn/api/todayOnhistory/queryEvent.php", { params: data })
      //   .then((res) => {});
      fetchData(data).then((res) => {
        console.log(res);
        if (res.reason == "success") {
          proxy.list = res.result;
        }
      });
    });
    return {
      data,
      list,
      onClickLeft,
    };
  },
};
</script>
<style scoped>
.box /deep/ .van-nav-bar .van-icon{
  color: #222 !important
}
.box /deep/ .van-nav-bar__text,.van-nav-bar .van-icon{
  color: #222 !important
}
</style>
<style scoped lang="stylus">

.box {
  width: 100%;
  height: 100%;
}

.ul {
  padding: 0 30px;

  .title {
  }

  .item {
    display: flex;
    padding-bottom: 5px;
    margin-bottom: 10px;
    justify-content: space-between;
    border-bottom: 1px #eee solid;

    .left {
      display: flex;
      align-items: center;
    }

    .right {
      margin-left:30px
      flex: 1
    }
  }
}
</style>